<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Serveurs d'Appli SatBet</title>


<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$("#salle").hide();
		
		$("#entrer").click(function() {
			$("#accueil").hide();
			$("#salle").show();
			var valeur = $("#pseudo").val();
			// alert(valeur + " - ");
			var numsalle = $('#numsalle option:selected').val();
			//alert(numsalle + " - ");
			$("#pseudoaffich").text(valeur+"@"+numsalle);
			
		});
		$("#sortie").click(function() {
			$("#salle").hide();
			$("#accueil").show();
		});
	});
	
</script>

</head>
<body>
	
		<h1> SatBet page !!!</h1>
		<form>
		<span id="accueil">
			Pseudonyme : <input id="pseudo" type="text" name="firstname"> <br> <br>
			Salle : <select id="numsalle" name="numsalle" size="1">
				<option name="salle 1">Salle 1</option>
				<option  value="salle 2">Salle 2</option>
				<option  value="salle 3">Salle 3</option>
				<option  value="salle 4">Salle 4</option>
				<option  value="salle 5">Salle 5</option>
			</select> <br> <br>

			<button id="entrer" type="button">Enter</button>
			<br> <br>
	</span>
	<span id="salle">
		<table>
		</table>
		<p id="pseudoaffich"> </p>
		<input id="envoye" autocomplete="off" name="Message" type="text"
		placeholder="Votre message ..." /> <br> <br> <input
		type="submit" value="Envoyer le message"> <br> <br>
		
		<button id="sortie" type="button">Sortir</button>
	</span>
	</form>
</body>
</html>